<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑设备' : '添加设备'"
    width="800px"
    :before-close="handleClose"
    class="device-dialog"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      label-position="left"
      class="device-form"
    >
      <!-- 设备名称 -->
      <el-form-item label="设备名称" prop="name" class="required-field">
        <el-input
          v-model="formData.name"
          placeholder="请输入设备名称"
          clearable
          size="large"
        />
      </el-form-item>

      <!-- 设备描述 -->
      <el-form-item label="设备描述" prop="description">
        <el-input
          v-model="formData.description"
          type="textarea"
          :rows="4"
          placeholder="请输入设备描述"
          resize="none"
        />
      </el-form-item>

      <!-- 设备类型 -->
      <el-form-item label="设备类型" prop="deviceType" class="required-field">
        <el-select
          v-model="formData.deviceType"
          placeholder="请选择设备类型"
          style="width: 100%"
          size="large"
          filterable
          allow-create
          default-first-option
          :reserve-keyword="false"
        >
          <el-option
            v-for="type in availableDeviceTypes"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          />
        </el-select>
      </el-form-item>

      <!-- 原型界面 -->
      <el-form-item label="原型界面" prop="prototypeFiles">
        <div class="upload-section">
          <el-button 
            type="primary" 
            size="large"
            @click="handlePrototypeUpload"
            class="prototype-upload-btn"
          >
            <el-icon><Upload /></el-icon>
            上传原型文件
          </el-button>
          <div class="upload-tip">
            <span class="tip-text">点击后选择设备文件夹，将自动上传文件夹内所有文件</span>
          </div>
          <!-- 已上传原型文件列表 -->
          <div v-if="uploadedPrototypeFiles.length > 0" class="file-list">
            <div 
              v-for="(file, index) in uploadedPrototypeFiles" 
              :key="index"
              class="file-item"
              @click="handleFileClick(file)"
            >
              <el-icon class="file-icon" :class="getFileIconClass(file.type)">
                <Document v-if="file.type === 'coordinates'" />
                <el-icon v-else-if="file.type === 'image'">📷</el-icon>
                <el-icon v-else>📄</el-icon>
              </el-icon>
              <div class="file-info">
                <span class="file-name">{{ file.name }}</span>
                <span class="file-type">{{ getFileTypeLabel(file.type) }}</span>
        </div>
              <el-button 
                type="danger" 
                size="small" 
                text 
                @click.stop="removePrototypeFile(index)"
                class="remove-btn"
              >
                <el-icon><Close /></el-icon>
            </el-button>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose" size="large" class="cancel-btn">
          取消
        </el-button>
        <el-button
          type="primary"
          size="large"
          :loading="submitLoading"
          @click="handleSubmit"
          class="submit-btn"
        >
          {{ isEdit ? '更新' : '创建' }}
        </el-button>
      </div>
    </template>

    <!-- 隐藏的文件输入 - 使用webkitdirectory实现文件夹上传（兼容所有环境） -->
    <input 
      ref="fileInput" 
      type="file" 
      webkitdirectory
      multiple 
      style="display: none" 
      @change="handleFileSelect"
    />
  </el-dialog>
</template>

<script setup>
/**
 * 设备管理对话框组件
 * 
 * 核心功能：
 * - 设备信息编辑
 * - 原型文件上传和自动化处理
 * - 表单验证
 */

import { ref, computed, watch, nextTick, h } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Upload, Close, Document } from '@element-plus/icons-vue'
import { useDeviceStore } from '@/stores/device'

console.log('DeviceDialog组件加载')

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  device: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const deviceStore = useDeviceStore()

// 响应式数据
const formRef = ref(null)
const fileInput = ref(null)
const submitLoading = ref(false)
const uploadedPrototypeFiles = ref([])

// 表单数据
const formData = ref({
  name: '',
  description: '',
  deviceType: '',
  category: '' // 添加分类字段
})

// 对话框可见性
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const isEdit = computed(() => !!(props.device && props.device.id))

// 验证是否为有效的设备类型名
const isValidDeviceTypeName = (name) => {
  // 不合适的名称列表（这些是具体设备名称，不是设备类型）
  const invalidNames = [
    'N系列', 'T系列', 'D系列', 'R系列',
    'ipM', 'iMC', 'uMEC', 'ePM', 'mWear',
    'ipM iMC', 'AED专题', 'DC-N3',
    '清洁与消毒专题', 'R12心电图机',
    'D3系列', 'D6系列', 'BeneHeart',
    'A系列', 'A3', 'A5', 'A7',
    'DP-50', 'DP-30', 'DP-20',
    'DC-40', 'DC-60', 'DC-80'
  ]
  
  // 检查是否在不合适列表中
  if (invalidNames.includes(name)) {
    return false
  }
  
  // 检查是否包含不合适的关键词
  const invalidKeywords = ['系列', '专题', 'Pro', 'Plus', 'Max']
  for (const keyword of invalidKeywords) {
    if (name.includes(keyword)) {
      return false
    }
  }
  
  // 检查是否为纯数字或纯字母缩写
  if (/^\d+$/.test(name) || /^[A-Z]{2,}\d*$/.test(name)) {
    return false
  }
  
  return true
}

// 可用的设备类型 - 只显示设备类型名（一级列表）
const availableDeviceTypes = computed(() => {
  console.log('=== 获取可用设备类型列表 ===')
  console.log('当前设备数量:', deviceStore.devices.length)
  
  // 从现有设备中提取设备类型名（一级列表）
  const existingTypes = new Set()
  
  deviceStore.devices.forEach(device => {
    console.log('检查设备:', device.name, '类型:', device.type, '是否分类:', device.isCategory, '所属分类:', device.category)
    
    // 正确的逻辑：查找直接存储的设备类型（一级列表）
    if (device.type === 'category' && device.isCategory === true) {
      // 这些就是设备类型（一级列表）
      console.log('  找到设备类型(一级列表):', device.name)
      
      // 更严格的过滤逻辑，只保留真正的设备类型名
      if (device.name && isValidDeviceTypeName(device.name)) { // 额外的验证函数
        existingTypes.add(device.name)
        console.log('    添加设备类型:', device.name)
      } else {
        console.log('    过滤掉不合适的名称:', device.name)
      }
    }
  })
  
  // 添加一些常见的设备类型（作为默认选项）
  const defaultTypes = [
    '监护仪',
    // '除颤仪',
    // '输液泵',
    // '超声设备',
    // '检验设备',
    // '手术设备',
    // 'CT设备',
    // 'MRI设备',
    // '生化分析仪',
  ]
  
  // 合并现有类型和默认类型
  defaultTypes.forEach(type => existingTypes.add(type))
  
  console.log('所有设备类型:', Array.from(existingTypes))
  
  // 转换为数组并排序
  const typeArray = Array.from(existingTypes).sort()
  
  // 转换为选项格式
  const typeOptions = typeArray.map(type => ({
    label: type,
    value: type
  }))
  
  // 添加"创建新类型"选项
  typeOptions.push({
    label: '+ 创建新类型',
    value: '__create_new__'
  })
  
  console.log('最终可用设备类型:', typeOptions.map(t => t.label))
  return typeOptions
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入设备名称', trigger: 'blur' },
    { min: 2, max: 50, message: '设备名称长度在2到50个字符', trigger: 'blur' }
  ],
  deviceType: [
    { required: true, message: '请选择或输入设备类型', trigger: 'change' }
  ]
}

// 方法定义
const initFormData = () => {
  console.log('=== 初始化表单数据 ===')
  console.log('传入的设备数据:', props.device)
  
  if (props.device && props.device.id) {
    // 编辑模式
    console.log('编辑模式 - 初始化表单数据:', props.device.name)
    formData.value = {
      name: props.device.name || '',
      description: props.device.description || '',
      deviceType: props.device.deviceType || props.device.name || '',
      category: props.device.category || '' // 编辑时使用设备的分类
    }
    
    // 初始化原型文件
    if (props.device.coordinateLog) {
      uploadedPrototypeFiles.value = [{
        name: props.device.coordinateLog.name || 'coordinate.log',
        url: props.device.coordinateLog.url,
        type: 'log'
      }]
    }
  } else {
    // 新增模式
    console.log('新增模式 - 初始化表单数据')
    console.log('传入的默认分类:', props.device?.category)
    
    formData.value = {
      name: '',
      description: '',
      deviceType: '',
      category: props.device?.category || '', // 使用传入的默认分类
      imageFiles: [],
      coordinateFiles: []
    }
    uploadedPrototypeFiles.value = []
    
    console.log('设置默认分类为:', formData.value.category)
  }
}

const handleClose = () => {
  console.log('关闭设备对话框')
  dialogVisible.value = false
  nextTick(() => {
    formRef.value?.resetFields()
    uploadedPrototypeFiles.value = []
  })
}

// 原型文件上传处理 - 使用webkitdirectory（兼容所有环境）
const handlePrototypeUpload = () => {
  console.log('开始文件夹上传流程（webkitdirectory）')
  
  if (!formData.value.name.trim()) {
    ElMessage.warning('请先输入设备名称')
    return
  }
  
  const deviceName = formData.value.name.trim()
  console.log('准备选择设备文件夹:', deviceName)
  
  // 显示提示
  ElMessage.info(`请选择设备"${deviceName}"的文件夹...`)
  
  // 直接触发文件夹选择（使用webkitdirectory，兼容HTTP/HTTPS/IP访问）
  fileInput.value?.click()
}

// 处理文件夹选择（webkitdirectory）
const handleFileSelect = (event) => {
  const files = Array.from(event.target.files)
  console.log('=== 开始处理文件夹 ===')
  console.log('选择的文件数量:', files.length)
  
  if (files.length === 0) {
    ElMessage.warning('未选择任何文件')
    return
  }
  
  // 获取文件夹信息
  const firstFile = files[0]
  const folderPath = firstFile.webkitRelativePath || ''
  const deviceName = formData.value.name.trim()
  
  console.log('文件夹路径:', folderPath)
  console.log('设备名称:', deviceName)
  
  // 验证文件夹名称（可选）
  if (folderPath && !folderPath.toLowerCase().includes(deviceName.toLowerCase())) {
    ElMessage.warning({
      message: `提示：文件夹名称不包含"${deviceName}"，请确认是否选择了正确的文件夹`,
      duration: 3000
    })
  }
  
  // 处理文件
  processFiles(files)
  
  // 清空input，允许重复选择同一文件夹
  event.target.value = ''
}

// 处理上传的文件
const processFiles = async (files) => {
  console.log('开始处理文件:', files.length)
  
  const processedFiles = []
  const imageFiles = []
  const coordinateFiles = []
  
  // 使用Promise.all确保所有文件都被正确处理
  await Promise.all(files.map(file => {
    return new Promise((resolve) => {
      const fileName = file.name.toLowerCase()
      const fileType = file.type
      
      // 分类文件
      if (fileName.includes('coordinate') || fileName.includes('坐标') || 
          fileName.endsWith('.txt') || fileName.endsWith('.log') || 
          fileName.endsWith('.json')) {
        // 坐标文件 - 读取内容
        console.log('识别到坐标文件:', file.name)
        const reader = new FileReader()
        reader.onload = (e) => {
          const content = e.target.result
          console.log(`坐标文件内容已读取: ${file.name}, 长度: ${content.length}`)
          
          const coordFile = {
            name: file.name,
            type: 'coordinates',
            file: file,
            content: content,  // ✅ 存储文件内容
            size: file.size
          }
          
          processedFiles.push(coordFile)
          coordinateFiles.push(coordFile)
          resolve()
        }
        reader.onerror = () => {
          console.error('读取坐标文件失败:', file.name)
          resolve()
        }
        reader.readAsText(file)  // ✅ 读取为文本
        
      } else if (fileType.startsWith('image/') || 
                 fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || 
                 fileName.endsWith('.png') || fileName.endsWith('.gif')) {
        // 图片文件
        console.log('识别到图片文件:', file.name)
        const reader = new FileReader()
        reader.onload = (e) => {
          const imageData = {
            id: `img_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
            name: file.name,  // 保留完整文件名
            url: e.target.result,
            thumbnail: e.target.result,
            file: file
          }
          
          imageFiles.push(imageData)
          
          processedFiles.push({
            name: file.name,
            type: 'image',
            file: file,
            size: file.size
          })
          resolve()
        }
        reader.onerror = () => {
          console.error('读取图片文件失败:', file.name)
          resolve()
        }
        reader.readAsDataURL(file)
        
      } else {
        // 其他文件
        console.log('识别到其他文件:', file.name)
        processedFiles.push({
          name: file.name,
          type: 'other',
          file: file,
          size: file.size
        })
        resolve()
      }
    })
  }))
  
  // 更新原型文件列表
  uploadedPrototypeFiles.value = processedFiles
  
  // 存储图片和坐标文件供后续使用
  formData.value.imageFiles = imageFiles
  formData.value.coordinateFiles = coordinateFiles
  
  console.log('文件处理完成:', {
    总文件数: processedFiles.length,
    图片数: imageFiles.length,
    坐标文件数: coordinateFiles.length
  })
  
  ElMessage.success(`成功上传 ${processedFiles.length} 个文件（图片:${imageFiles.length}, 坐标:${coordinateFiles.length}）`)
}

const removePrototypeFile = (index) => {
  console.log('删除原型文件:', index)
  uploadedPrototypeFiles.value.splice(index, 1)
}

// 处理文件点击（打开/放大）
const handleFileClick = (file) => {
  console.log('点击文件:', file.name, file.type)
  
  if (file.type === 'image') {
    // 显示图片放大对话框
    showImagePreview(file)
  } else if (file.type === 'coordinates') {
    // 显示坐标文件内容
    showCoordinateFileContent(file)
  } else {
    // 其他文件类型
    ElMessage.info(`打开文件: ${file.name}`)
  }
}

// 显示图片放大
const showImagePreview = (file) => {
  ElMessageBox({
    title: file.name,
    message: h('div', {
      style: 'text-align: center; padding: 20px;'
    }, [
      h('img', {
        src: file.url,
        style: 'max-width: 100%; max-height: 500px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);'
      })
    ]),
    showCancelButton: false,
    confirmButtonText: '关闭',
    customClass: 'image-preview-dialog'
  })
}

// 显示坐标文件内容
const showCoordinateFileContent = (file) => {
  const content = file.content || '文件内容为空'
  ElMessageBox({
    title: `坐标文件: ${file.name}`,
    message: h('div', {
      style: 'max-height: 400px; overflow-y: auto;'
    }, [
      h('pre', {
        style: 'background: #f5f5f5; padding: 15px; border-radius: 6px; font-family: monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;'
      }, content)
    ]),
    showCancelButton: false,
    confirmButtonText: '关闭',
    customClass: 'coordinate-file-dialog'
  })
}

// 获取文件图标样式
const getFileIconClass = (fileType) => {
  switch (fileType) {
    case 'coordinates':
      return 'coordinate-icon'
    case 'image':
      return 'image-icon'
    default:
      return 'default-icon'
  }
}

// 获取文件类型标签
const getFileTypeLabel = (fileType) => {
  switch (fileType) {
    case 'coordinates':
      return '坐标文件'
    case 'image':
      return '图片文件'
    default:
      return '其他文件'
  }
}

// 表单提交
const handleSubmit = async () => {
  console.log('提交设备表单')
  
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitLoading.value = true
    
    // 处理设备类型
    let deviceType = formData.value.deviceType
    if (deviceType === '__create_new__') {
      // 用户选择了创建新类型，需要输入新类型名称
      const { value: newType } = await ElMessageBox.prompt('请输入新的设备类型名称', '创建新类型', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{2,20}$/,
        inputErrorMessage: '类型名称长度在2到20个字符'
      })
      deviceType = newType
      formData.value.deviceType = newType
    }
    
    // 构建设备数据
    console.log('=== 构建设备数据 ===')
    console.log('设备名称:', formData.value.name)
    console.log('设备类型:', deviceType)
    console.log('表单中的分类:', formData.value.category)
    console.log('备用分类函数结果:', determineCategory(deviceType))
    
    const finalCategory = formData.value.category || determineCategory(deviceType)
    console.log('最终使用的分类:', finalCategory)
    
    const deviceData = {
      name: formData.value.name.trim(),
      description: formData.value.description.trim(),
      deviceType: deviceType, // 这是设备类型（如"超声设备"）
      status: 'active',
      images: formData.value.imageFiles || [],
      coordinateFiles: formData.value.coordinateFiles || [],
      coordinateLog: uploadedPrototypeFiles.value.find(f => f.type === 'coordinates') ? {
        name: uploadedPrototypeFiles.value.find(f => f.type === 'coordinates').name,
        content: uploadedPrototypeFiles.value.find(f => f.type === 'coordinates').content,
        url: `/mock/${formData.value.name}_coordinates.log`
      } : null,
      category: finalCategory, // 优先使用用户选中的分类
      type: 'device' // 这是具体设备
    }
    
    console.log('提交设备数据:', deviceData)
    
    if (isEdit.value) {
      await deviceStore.updateDevice(props.device.id, deviceData)
      ElMessage.success('设备更新成功')
    } else {
      const createdDevice = await deviceStore.addDevice(deviceData)
      ElMessage.success('设备创建成功')
      
      // 新增设备后，强制刷新设备类型列表
      console.log('=== 设备创建成功，刷新设备类型列表 ===')
      console.log('新创建的设备类型:', deviceType)
      
      // 如果新创建的设备有坐标文件和图片，触发图片分类
      if (createdDevice && createdDevice.coordinateLog && createdDevice.images && createdDevice.images.length > 0) {
        console.log('=== 触发新设备图片分类 ===')
        try {
          const classificationResult = deviceStore.classifyDeviceImages(createdDevice)
          console.log('图片分类完成，文件夹数量:', classificationResult.folders.length)
        } catch (classifyError) {
          console.warn('图片分类失败:', classifyError)
        }
      }
      
      // 触发computed属性重新计算
      nextTick(() => {
        console.log('刷新后的设备类型列表:', availableDeviceTypes.value.map(t => t.label))
      })
    }
    
    emit('success')
    dialogVisible.value = false
  } catch (error) {
    if (error !== 'cancel') {
    console.error('提交设备表单失败:', error)
    ElMessage.error(isEdit.value ? '更新设备失败' : '创建设备失败')
    }
  } finally {
    submitLoading.value = false
  }
}

// 根据设备类型确定一级分类（仅作为备用，优先使用用户选中的分类）
const determineCategory = (deviceType) => {
  console.log('=== 备用分类确定逻辑 ===')
  console.log('设备类型:', deviceType)
  console.log('注意：这个函数仅作为备用，优先使用用户选中的分类')
  
  const categoryMap = {
    // 急救与生命支持
    '监护仪': 'emergency_life_support',
    '除颤仪': 'emergency_life_support',
    '麻醉机': 'emergency_life_support',
    '呼吸机': 'emergency_life_support',
    '心电图机': 'emergency_life_support',
    '血压计': 'emergency_life_support',
    '体温计': 'emergency_life_support',
    
    // 输注泵
    '输液泵': 'infusion_pump',
    '注射泵': 'infusion_pump',
    
    // 医学影像
    '超声设备': 'medical_imaging',
    'CT设备': 'medical_imaging',
    'MRI设备': 'medical_imaging',
    'X光机': 'medical_imaging',
    
    // 体外诊断
    '检验设备': 'in_vitro_diagnostics',
    '血糖仪': 'in_vitro_diagnostics',
    '生化分析仪': 'in_vitro_diagnostics',
    '尿液分析仪': 'in_vitro_diagnostics',
    
    // 外科设备
    '手术设备': 'surgical_equipment',
    '电刀': 'surgical_equipment',
    '制氧机': 'surgical_equipment',
    '雾化器': 'surgical_equipment'
  }
  
  // 精确匹配
  if (categoryMap[deviceType]) {
    console.log('精确匹配到分类:', categoryMap[deviceType])
    return categoryMap[deviceType]
  }
  
  // 模糊匹配
  for (const [keyword, category] of Object.entries(categoryMap)) {
    if (deviceType.includes(keyword) || keyword.includes(deviceType)) {
      console.log('模糊匹配到分类:', category)
      return category
    }
  }
  
  // 默认分类（仅作为最后备用）
  console.log('警告：使用默认分类 emergency_life_support，请检查逻辑')
  return 'emergency_life_support'
}

// 监听对话框打开
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    nextTick(() => {
      initFormData()
    })
  }
})

// 监听设备变化
watch(() => props.device, () => {
  if (props.modelValue) {
    nextTick(() => {
      initFormData()
    })
  }
})
</script>

<style scoped>
/* 对话框整体样式 */
.device-dialog :deep(.el-dialog) {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.device-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 24px;
  border-radius: 12px 12px 0 0;
}

.device-dialog :deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
}

.device-dialog :deep(.el-dialog__body) {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

/* 表单样式 */
.device-form {
  margin-top: 8px;
}

.device-form :deep(.el-form-item) {
  margin-bottom: 24px;
}

.device-form :deep(.el-form-item__label) {
  font-weight: 600;
  color: #333333;
  font-size: 14px;
}

.required-field :deep(.el-form-item__label)::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}

.device-form :deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.device-form :deep(.el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.device-form :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
}

.device-form :deep(.el-select) {
  width: 100%;
}

/* 上传区域样式 */
.upload-section {
  width: 100%;
}

.upload-tip {
  margin-top: 12px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tip-text {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

.tip-text.tip-secondary {
  font-size: 11px;
  color: #a8abb2;
}

/* 原型文件上传按钮 */
.prototype-upload-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.prototype-upload-btn:hover {
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  transform: translateY(-1px);
}

/* 文件列表 */
.file-list {
  margin-top: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: white;
  max-height: 300px;
  overflow-y: auto;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.file-item:last-child {
  border-bottom: none;
}

.file-item:hover {
  background: #f8f9fa;
  transform: translateX(2px);
}

.file-icon {
  margin-right: 12px;
  font-size: 18px;
  transition: color 0.2s ease;
}

.file-icon.coordinate-icon {
  color: #e6a23c;
}

.file-icon.image-icon {
  color: #67c23a;
}

.file-icon.default-icon {
  color: #909399;
}

.file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.file-name {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.file-type {
  font-size: 12px;
  color: #909399;
}

.remove-btn {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.file-item:hover .remove-btn {
  opacity: 1;
}

/* 文件预览对话框样式 */
:deep(.image-preview-dialog) {
  .el-message-box {
    max-width: 80vw;
    max-height: 80vh;
  }
}

:deep(.coordinate-file-dialog) {
  .el-message-box {
    max-width: 600px;
  }
}

/* 底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e4e7ed;
  background: #fafafa;
}

.cancel-btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 500;
}

.submit-btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.submit-btn:hover {
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .device-dialog :deep(.el-dialog) {
    width: 95vw !important;
    margin: 0 auto;
  }
  
  .dialog-footer {
    flex-direction: column;
  }
  
  .cancel-btn,
  .submit-btn {
    width: 100%;
  }
}
</style>
